<template>
  <view class="body">
		<scroll-view scroll-x class="scrollNav" >
			<view class="nav" :class="index==navIndex ? 'active' :'' " 
				v-for="(item,index) in navList" @click="clickNav(index)">{{navList[index]}}</view>
		</scroll-view>
		<view></view>
	
    <view class="search">
		<!-- 搜索功能 -->
      <uni-search-bar @input="input" @confirm="handleEnter" v-model="queryParams.name" placeholder="请输入书本名称"></uni-search-bar>
    </view>
    <view class="uni-container" style="margin: 0px 20rpx;">
      <uni-table border stripe emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="left" width="20rpx">序号</uni-th>
          <uni-th align="center" width="250rpx">书名</uni-th>
          <!-- <uni-th align="center" width="50rpx">用户名称</uni-th> -->
          <uni-th align="center" width="20rpx">赔偿金额</uni-th>
          <uni-th align="center" width="20rpx">书本原价</uni-th>
          <uni-th align="center" width="20rpx">是否已经赔偿</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <!-- <uni-tr v-for="(item, index) in fineList" :key="index" @click.native="trClick(index)"> -->
		<uni-tr v-for="(item, index) in fineList" :key="index">
          <uni-td>{{item.penaltyId }}</uni-td> 
          <uni-td @click="handTr">《{{ item.name }}》</uni-td>
          <!-- <uni-td>{{ item.nickName }}</uni-td> -->
          <uni-td class="yuanlaiprice">{{ item.penaltyPrice }}元</uni-td>
          <uni-td class="yuanlaiprice">{{ item.price }} 元</uni-td>
          <uni-td>{{ item.isIndemnify ? '是' : '否' }}</uni-td>
        </uni-tr>
      </uni-table>
	  <!-- 下拉加载 -->
	  <view class="lodaing">
	  	<view v-if="loading==1">数据加载中....</view>
		<view v-if="loading==2">没有更多数据了</view>
	  </view>
    </view>
  </view>
</template>

<script>
import { searchFine } from "@/api/system/finelist.js";
export default {
  data() {
    return {
      // 请求参数对象
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        changeFine: null,
        isIndemnify: null,
        userName: null,
        penaltyId: null,
      },
      fineList: [],
      total: 0, // 总数
	  loading:0 ,//0默认 1加载中 2没有更多数据
	  time:null,
	  navList:["全部","已赔偿","未赔偿"],
	  navIndex:0
    };
  },
  onLoad() {
    this.getList();
  },
  //触底
  onReachBottom() {
    console.log("底部了");
    if (this.loading == 2) {
      return;
    }
    this.queryParams.pageNum++;
    this.loading = 1;
    this.getList();
    console.log(parseInt(this.total / 10), "值");
    console.log("页码", this.queryParams.pageNum);
    if (this.queryParams.pageNum >= Math.ceil(this.total / 10)) {
      this.loading = 2;
    }
  },

  methods: {
    getList() {
      searchFine(this.queryParams)
        .then((response) => {
          console.log("测试接口数据11,", response);
	
          this.fineList = [...this.fineList,...response.rows];
          this.total = response.total;
		  // this.queryParams.pageNum=response.pageNum
        })
        .catch((err) => {
          console.log(err);
        });
    },
	handleEnter() {
		this.fineList.pageSize = 10
		this.fineList=[]
		this.getList()
	},
	input(e){
		// console.log(e);
		clearTimeout(this.time)
		this.time = setTimeout(() => {
			console.log(e)
			if(e==''){
				this.fineList=[]
				this.getList()
				console.log("执行getlist");
			}
		},500)
	},
	// trClick(row){
	// 	console.log(`"点击了${row}行"`)
	// }
	
	//点击导航切换
	clickNav(index){
	  this.navIndex = index;
	 if(index === 1){
	    this.queryParams.isIndemnify = 1; // 筛选已赔偿的数据
	  }else if(index===2){
	    this.queryParams.isIndemnify = 0; // 筛选未赔偿的数据
	  }
	  else {
		  this.queryParams.isIndemnify='';
	  } 
	  this.queryParams.pageNum=1;
	  this.fineList = []; // 先清空当前展示的表格数据
	 this.loading=0
	  // this.queryParams.pageNum = 1; // 重置页码
	  this.getList(); // 获取新的表格数据
	}

  },

};
</script>

<style lang="scss">
	.lodaing{
		text-align: center;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}
	.scrollNav{
		height: 100rpx;
		background-color:white;
		border-top: 1px solid #f1f1f1;
		white-space: nowrap;
		position: fixed;
		top: var(--window-top);
		left:0;
		z-index: 10;
		.nav{
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 80rpx;
			color: #333;
			&.active{
				color: #3c96f3;
				// color: white;
			}
		}
		
	}
	.search{
		padding-top: 100rpx;
		
		
	}

</style>
